<template>
  <div class="salesForcast">
    <el-card v-loading="isLoading" style="padding-bottom:20px">
      <SalesCharts
        :chart-data="salespredict"
        v-if="salespredict.seriesId != undefined"
        :xAxis="XDate"
      />
      <!-- 骨架占位符 -->
      <el-skeleton style="width: 100%; height:520px" v-if="isLoading">
        <template slot="template">
          <el-skeleton-item variant="text" style="width: 100%; height: 100%;" />
        </template>
      </el-skeleton>
      <div style="display:flex;justify-content:space-around;">
        <h3>
          滚动预测 <i>R²</i> 得分：<span style="color:#F72C5B">{{
            salespredict.rollScore
          }}</span>
        </h3>
         <h3>
          超参数优化AIC最小值：<span style="color:#F72C5B">{{
            salespredict.aic
          }}</span>
        </h3>
         <h3>
          SARIMA参数：<span style="color:#F72C5B">{{
            salespredict.pdq
          }} × {{
            salespredict.pdq_x_PDQs
          }}</span>
        </h3>
        <h3>
          传统预测 <i>R²</i> 得分：<span>{{
            salespredict.traditionScore
          }}</span>
        </h3>
      </div>
      <div style="float:right;margin-top:16px;">
        <el-button type="danger" @click="clearEvent()" plain size="mini"
          >暂停</el-button
        ><el-button type="primary" @click="addEvent(3000)" plain size="mini"
          >开始</el-button
        >
        <el-button type="warning" @click="resetEvent()" plain size="mini"
          >重置</el-button
        >
      </div>
    </el-card>
  </div>
</template>
<script>
import SalesCharts from "@/components/SalesCharts";
import { getXDate } from "@/utils/predict.js"
export default {
  data() {
    return {
      salesList: [],
      salespredict: {},
      timer: null,
      currentIndex: 1,
      // 是否加载中
      isLoading: true,
      // dateInfo
      XDate: []
    };
  },
  components: { SalesCharts },
  created() {
    this.XDate = getXDate("2014/12",84)
    console.log(this.XDate)
    // 从本地缓存中读取数据
    this.salesList = JSON.parse(localStorage.getItem("salesList"));
    // 读取当前图表的应该展示的索引值
    let index = localStorage.getItem("saleIndex")
    // 如果有索引值 则进行更改
    if (index) {
      this.salespredict = this.salesList[index];
      this.currentIndex = index
      localStorage.removeItem("saleIndex")
    } else {
      this.salespredict = this.salesList[0];
      // 进行轮播滚动
      this.addEvent(3000);
    }
    this.isLoading = false;
  },
  methods: {
    clearEvent() {
      console.log("clear");
      clearInterval(this.timer);
    },
    addEvent(gapTime) {
      console.log("add");
      this.clearEvent()
      this.timer = setInterval(() => {
        this.salespredict = this.salesList[
          this.currentIndex % this.salesList.length
        ];
        this.currentIndex++;
      }, gapTime);
    },
    resetEvent() {
      this.clearEvent();
      this.currentIndex = 1
      this.salespredict = this.salesList[0];
      this.addEvent(3000);
    },
  },
};
</script>
